<template>
  <div class="app-container">
        <div class="cbox">
          <el-form class="form" ref="form" :model="from" :inline="true" label-width="5rem" size="mini">

                <el-form-item label="箱号:">
                  <el-input   placeholder="请输入箱号" v-model="from.Code"  clearable></el-input>
                </el-form-item>

                <el-form-item label-width="10px">
                  <el-button @click="searchType" type="primary">查询</el-button>
                </el-form-item>

          </el-form>
        </div>
        <div class="table" ref="topType">
            <div class="inner" ref="inner">
                  <el-table
                      :data="DetailedData"
                      border
                      :height="maxHeight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column type="index" :index="indexMethod"  show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="trsCasenum"  show-overflow-tooltip label="箱号"></el-table-column>
                      <el-table-column prop="trsCarrier"  show-overflow-tooltip label="承运人"></el-table-column>
                      <el-table-column prop="trsShipName"  show-overflow-tooltip label="船名"></el-table-column>
                      <el-table-column prop="trsVoyage"  show-overflow-tooltip label="航次"></el-table-column>
                      <el-table-column prop="trsBoxsize" align="center" show-overflow-tooltip label="箱型尺寸"></el-table-column>
                      <el-table-column prop="trsType" align="center" show-overflow-tooltip label="最新状态"></el-table-column>
                      <el-table-column prop="trsOperatdate" align="center" show-overflow-tooltip label="状态时间"></el-table-column>
                      <!-- <el-table-column prop="trsType"  show-overflow-tooltip label="类型"></el-table-column> -->
                      <!-- <el-table-column prop=""  show-overflow-tooltip label="操作方式"></el-table-column> -->
                  </el-table>
            </div>
        </div>
          <!-- 分页 -->
          <el-pagination
            class="pagination"
            small
            background
            ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.pageSize"
            :layout="Pagination.layout"
            :total="Pagination.total"
          ></el-pagination>
  </div>
</template>

<script>
import {
  GetTrShipingMessage,
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      from:{
        Code:'',
      },
      maxHeight:-1,
      DetailedData:[], //主列表的数据
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
  },
  methods:{

    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      GetTrShipingMessage({
        trsCasenum:this.from.Code,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data.FTKJWLHYPT
        updateTotal(Number(response.data.total.FTKJWLHYPT))
      })
    },
    //点击搜索
    searchType(){
      this.refreshList()
    },
  }
}
</script>

<style  lang="scss" scoped>

.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
